<template>
    <div class="Parkingrecord">
        <div class="query">
            <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="关键词搜索"
            @select="handleSelect"
            class="searchtext"
            ></el-autocomplete>
            <el-select v-model="value" placeholder="所属小区" class="changeinput">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="value" placeholder="楼宇" class="changeinput">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <!-- 查询和重置按钮 -->
            <el-button type="primary" class="chaxun" @click="select"><i class="el-icon-search" ></i>查询</el-button>
            <el-button class="reaseat" @click="reasert"><i class="el-icon-refresh-right" ></i>重置</el-button>
        </div>
        <!-- 数据表格 -->
        <div class="datalists">
            <div class="datalistsname">数据列表</div>
            <!-- 添加按钮 -->
            <!-- <el-button type="primary" class="append" @click="append"><i class="el-icon-plus"></i>添加账单</el-button> -->
             <!-- 导入数据 -->
            <!-- <el-button type="primary" class="ImportData" @click="ImportData">导入数据</el-button>   -->
            <!-- 数据表格 -->
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="222">
                    </el-table-column>
                    <el-table-column
                    prop="phonenumber"
                    label="手机号"
                    width="144">
                    </el-table-column>
                    <el-table-column
                    prop="Entranceexitgates"
                    label="出入闸机"
                    width="133">
                    </el-table-column>
                    <el-table-column
                    prop="Entryexitmethods"
                    label="出入方式"
                    width="155">
                    </el-table-column>
                     <el-table-column
                    prop="accesstime"
                    label="出入时间"
                    width="128">
                    </el-table-column>
                     <el-table-column
                    prop="Enteringexitingcommunity"
                    label="出入小区"
                    width="155">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="225">
                        <template slot-scope="scope">
                            <i class="el-icon-view"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="view">{{ scope.row.view }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <Pagecurren></Pagecurren> -->
            </div>
            <Pagecurren></Pagecurren>
        </div>
    </div>
</template>

<script>
import Pagecurren from '../components/Pagecurren.vue'
export default {
    components:{
        Pagecurren
    },
    data(){
        return{
            value:'',
            state:'',
            options: [{
            value: '选项1',
            label: '万达文旅城'
            }, {
            value: '选项2',
            label: '碧桂园'
            }, {
            value: '选项3',
            label: '万象城'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value2: [],
            tableData:[
                {
                    date: '1',
                    name: '赵小刚',
                    phonenumber:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Entryexitmethods:'刷卡',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    view:'查看'
                }, 
                {
                    date: '2',
                    name: '赵小刚',
                    phonenumber:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Entryexitmethods:'刷卡',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    view:'查看'
                }, 
                {
                    date: '3',
                    name: '赵小刚',
                    phonenumber:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Entryexitmethods:'刷卡',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    view:'查看'
                }, 
                {
                    date: '4',
                    name: '赵小刚',
                    phonenumber:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Entryexitmethods:'刷卡',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    view:'查看'
                }, 
                {
                    date: '4',
                    name: '赵小刚',
                    phonenumber:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Entryexitmethods:'刷卡',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    view:'查看'
                }, 
            ]
        }
    },
    methods:{
        select(){
            console.log('查询')
        },
        reasert(){
            console.log('重置')
        },
        view(){
            console.log('查看')
        },
         loadAll() {
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
                { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
                { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
                { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
                { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
                { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
                { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
                { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
                { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
                { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
                { "value": "枪会山", "address": "上海市普陀区棕榈路" },
                { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
                { "value": "钱记", "address": "上海市长宁区天山西路" },
                { "value": "壹杯加", "address": "上海市长宁区通协路" },
                { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
                { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
                { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
                { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
                { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
                { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
                { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
                { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
                { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
                { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
                { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
                { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
                { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
                { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
                { "value": "浏阳蒸菜", "address": "天山西路430号" },
                { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
                { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
                { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
                { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
                { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
                { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
                { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
                { "value": "阳阳麻辣烫", "address": "天山西路389号" },
                { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
            ];
        },
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
            cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            console.log(item);
        },
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
}
</script>

<style lang="scss" scoped>
    .Parkingrecord{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .query{
            width: 1260px;
            height: 95px;
            display: flex;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
            border:  1px solid rgba(233, 233, 233, 1);
            padding-left: 20px;
            position: relative;
            .selectdate{
                height: 35px !important;
                ::v-deep .el-input__inner{
                    height: 35px !important;
                }
            }
            .selection{
                width: 405px;
                margin-right: 10px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            .changeinput{
                width: 180px;
                margin-right: 10px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            .searchtext{
                width: 180px;
                margin-right: 10px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            // 查询按钮
            .chaxun{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #0079fe !important;
                .el-icon-search{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .chaxun:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            // 重置按钮
            .reaseat{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff !important;
                .el-icon-refresh-right{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .reaseat:hover{
                border-color: #0079fe !important;
                color: #0079fe !important;
            }
            
        }
         // 数据列表
        .datalists{
            width: 1260px;
            height: 1196px;
            padding: 0 20px;
            margin-top: 10px;
            background-color: #fff;
            border: 1px solid rgba(233, 233, 233, 1);
            position: relative;
            box-sizing: border-box;
            // 数据列表名字名称
            .datalistsname{
                margin-top: 40px;
                width: 57px;
                height: 18px;
                line-height: 18px;
                color: #666666;
                font-size: 14px;
            }
            // 添加数据按钮
            .append,.appends,.ImportData{
                min-width: 80px;
                padding: 0 5px;
                height: 35px;
                position: absolute;
                right: 20px;
                top: 23px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                background-color: #0079fe !important;
                .el-icon-plus,.el-icon-folder-add{
                    font-size: 16px;
                    margin-right: 5px;
                    font-weight: 700;
                }
            }
            .ImportData{
                position: absolute;
                right: 120px;
                top: 23px;
            }
            .append:hover,.appends:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            .appends{
                position: absolute;
                padding: 0 2px;
                right: 120px;
                top: 23px;
            }
            // 数据表格
            .datatable{
                margin-top: 20px;
                ::v-deep .has-gutter th{
                    height: 45px !important;
                    background-color: #f5f5f5;
                    box-sizing: border-box;
                    padding: 0 !important;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                }
                ::v-deep .el-table__row td{
                    height: 50px !important;
                    padding: 0 !important;
                }
                ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                    background-color: #f9f9f9;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(1){
                    color: #0079fe !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(2){
                    color: #666 !important;
                    text-align: center !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(4){
                    color: #999 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                    text-align: center;
                    color: #0079fe;
                    // cursor: pointer;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                    cursor: pointer;
                    text-decoration: underline !important;
                    // color: #4a4a4a;
                }
                ::v-deep .el-table__row .el-table__cell{
                    color: #666666;
                    font-size: 12px;
                }
                ::v-deep .el-table__row:hover{
                    background-color: inherit !important;
                }
                
            }
        }
    }
</style>